<template>
  <p>{{ person.address }}</p>
  <button @click="handleClick">修改地址</button>
  <p>{{ arr[0] }}</p>
  <button @click="modifyArr">修改地址</button>
</template>
<script>
// 为什么 Vue3 把响应式的 API 从 Object.defineProperty 换成 Proxy
// 总结：性能！
// 1. Object.defineProperty 劫持/监听的是对象中的每一个属性，而 Proxy 直接劫持的是整个对象，如果对象里面还是对象 2 着都是需要递归的
// 2. Vue2 中有 2 种操作数据的情况不是响应式的
// 2.1 给对象不存在的 key 进行赋值，可以通过 this.$set 或 Vue.set 进行解决
// 2.2 通过索引操作数组的下标也不是响应式的，为什么通过下表修改不是响应式的啊？并不是 Object.defineProperty 不支持对数组的监听，而是出于性能的考虑
// 3. Vue2 删除对象中的属性也不是响应式的，要通 this.$delete 或 Vue.delete 去解决，Vue3 不存在这个问题
import { reactive } from 'vue'
export default {
  setup() {
    const person = reactive({
      name: 'ifer',
      age: 18,
    })
    const arr = reactive(['a', 'b', 'c'])
    const handleClick = () => {
      person.address = '河南'
    }
    const modifyArr = () => {
      arr[0] = 'xxx'
    }
    return {
      person,
      handleClick,
      arr,
      modifyArr,
    }
  },
}
</script>
